<template>
	<view class="main">
		<view style="font-size: 32rpx;">
			<view style="font-weight: 600;">您的分享成就：</view>
			<view>&nbsp;&nbsp;&nbsp;&nbsp;【分享成功注册{{joinnumber}}人】</view>
			<view>&nbsp;&nbsp;&nbsp;&nbsp;【分享成功会员{{vipnumber}}人】</view>
		</view>
		<view>第一层级：{{total}}人</view>
		<view class="nxc" v-if="dataList">	
			<view class="nxc-item" v-for="(item, index) in dataList" :key="item.id"  >
				<view class="item">
					<view class="content">	
						{{item.nickname}}<text class="radius margin-right-xs bg-red" style="font-size: 11px ;">{{item.type == null?'':(item.is_vip==1?'会员':'')}}</text>
					</view>									
					<view class="action" @tap ="checkitem(index)">
						<text style="border: 1px solid red;border-radius: 3px;color: red;font-size: 24rpx;padding: 0 5px;">下级{{item.childlist.length}}人</text>
						<text :class="item.checked?'wlIcon-fanhui4':'wlIcon-fanhui2'" style="float: right;margin-top: 3px;"></text>
						
					</view>
					<recursive-list v-if="item.childlist && item.childlist.length" v-show="item.checked" color="#6A6A6A"  :list="item.childlist" />
				</view>					
			</view>
		</view>
		<!-- 空 -->
		<view v-if="dataList.length == 0">
			<wanl-empty src="ticket_default3x" text="你还没有分享用户呢"/>
		</view>
		<view class="edgeInsetBottom"></view>
		<uni-load-more :status="status" :content-text="contentText" />
	</view>
</template>

<script>
import recursiveList from '@/components/recursiveList/recursiveList.vue';
 
export default {
  components: {
    recursiveList
  },
	data() {
		return {
			dataList: [],			
			type: {
				0: '否',
				1: '是'
			},
			color:'#E5E5E5',
			reload: false, //判断是否上拉
			total: 0, //数据量
			joinnumber:0,
			vipnumber:0,
			twobuynumber:0,
			totalshare:0,
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'more',
			contentText: {
				contentdown: ' ',
				contentrefresh: '加载中',
				contentnomore: ''
			},
			check:false
		};
	},
	onLoad() {
		this.loadData();
	},
	onPullDownRefresh() {
		this.current_page = 1;
		this.reload = true;
		this.loadData();
	},
	onReachBottom() {
		//判断是否最后一页
		if (this.current_page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.reload = false;
			this.current_page = this.current_page + 1; //页码+1
			this.status = 'loading';
			this.loadData();
		}
	},
	methods: {
		async loadData(type) {
			let data = {
					page: this.current_page
				};
			if(type)data.type = type;
			await uni.request({
				url: '/wanlshop/user/getOfflines',
				method: 'POST',
				data: data,
				success: res => {
					uni.stopPullDownRefresh();
					this.dataList = this.reload ? res.data.data : this.dataList.concat(res.data.data); //数据 追加
					this.total = res.data.total; //数据量
					this.current_page = res.data.current_page; //当前页码
					this.last_page = res.data.last_page; //总页码
					this.status = res.data.total == 0 ? 'noMore' : 'more';
					this.joinnumber = res.data.joinnumber;
					this.vipnumber = res.data.vipnumber;
					this.twobuynumber = res.data.twobuynumber;
					this.totalshare = res.data.totalshare;
					this.dataList.forEach(item => {
						item.checked =false;
						return item;
					})
				}
			});
		},
		checkitem(i){				
			if(!this.dataList[i].checked){				
				this.dataList[i].checked = true
			}
			else {				
				this.dataList[i].checked = false;
			}
			console.log(this.dataList);
			this.$forceUpdate();
		}
	}
};
</script>

<style>
	.main{
		width: 100%;height: 100#;background-color: #E3E8F7;margin-top: -30rpx;padding:24rpx;padding-top: 60rpx;
	}
	.nxc-item .item{
		margin: 20rpx 0;
		background-color: white;
		border-radius: 6px;
		padding: 10rpx;
		font-size: 32rpx;
		position: relative;
		
	}
	.nxc-item .item .content{
		border-left: 2px solid red;
		line-height: 40rpx;
		padding: 18rpx 20rpx;
	}
	.nxc-item .item .action{
		position: absolute;
		right: 10px;
		top: 30rpx;
	}
	
	
</style>
